<!--登录页面-->
<template>
  <div class="login">
    <div class="login-center">
      <!--登录logo-->
      <div class="login-logo" @click="goHome()">
        <img src="../../assets/images/logo.png">
      </div>
      <!--登录信息输入-->
      <div class="login-input">
        <div class="login-input-user">
          <input
            type="text"
            v-model.trim="loginForm.username"
            @keyup.enter="login()"
            placeholder="手机号"
            autocomplete="off"
          >
        </div>
        <div class="login-input-pass">
          <input
            type="password"
            v-model.trim="loginForm.password"
            @keyup.enter="login()"
            placeholder="请输入密码"
            autocomplete="off"
          >
          <span>
            <router-link to="/loginforgetcode">忘记密码</router-link>
          </span>
        </div>
        <div class="login-input-bt" @click="login()">登录</div>
        <!-- <el-button type="primary">主要按钮</el-button> -->
        <div class="login-input-ft">
          <div class="login-input-message">
            <router-link to="/loginmessage">短信验证码登录</router-link>
          </div>
          <div class="login-input-forget">
            <router-link to="/loginphone">新用户注册</router-link>
          </div>
        </div>
      </div>
      <!--登录方式-->
      <!-- <div class="login-mode">
        <div class="login-mode-center">
          <div class="login-mode-header">
            <div class="login-mode-hr"></div>其他方式登录
            <div class="login-mode-hr"></div>
          </div>
          <div class="login-mode-list">
            <div class="login-mode-item">
              <img src="../../assets/images/wechat.png">
              <div class="login-mode-item-text">微信登录</div>
            </div>
            <div class="login-mode-item">
              <img src="../../assets/images/qq.png">
              <div class="login-mode-item-text">QQ登录</div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import * as userAPI from "@/api/user";
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        // username: "17600467656",
        // password: "123456",
        username: "",
        password: ""
      }
    };
  },

  created() {
    // if(this.$cookies.get(''))
    const random = new Date() * 1 + Math.random();
    localStorage.setItem("random", random);
    this.$cookies.remove("signature");
  },
  methods: {
    login() {
      if (!this.loginForm.username) {
        this.$message.warning("用户名不能为空");
        return;
      }
      if (!this.loginForm.password) {
        this.$message.warning("密码不能为空");
        return;
      }
      userAPI
        .login(this.loginForm)
        .then(response => {
          if (response.code == "200") {
            this.$message.success("登录成功");
          } else {
            this.$message.warning(response.message);
            return;
          }
          const token = response.data.token;
          this.$cookies.set("signature",token,60*60*4);
          localStorage.userInfo = JSON.stringify(response.data);
          setTimeout(() => {
            this.$router.push({
              path: "Home/Index"
            });
          }, 1000);
        })
        .catch(err => {
          console.log("登录失败=====>", err);
          this.$message.warning(err.message);
        });
    },
    goHome(){
      window.location.href="/home/html/"
    }
  }
};
</script>
<style scoped>
/*登录logo*/
.login {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #ffffff;
}
.login-center {
  width: 640px;
  margin: 0 auto;
}
.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 80px;
}
.login-logo > img {
  width: 250px;
}
/*登录信息输入*/
.login-input {
  padding: 50px 20px;
}
.login-input-user {
  border-bottom: 1px #f4f4f4 solid;
}
.login-input-user > input {
  width: 100%;
  border: none;
  font-size: 14px;
  height: 45px;
  line-height: 45px;
  outline: none;
}
.login-input-pass {
  display: flex;
  border-bottom: 1px #f4f4f4 solid;
  align-items: center;
}
.login-input-pass > input {
  width: 100%;
  border: none;
  font-size: 14px;
  height: 45px;
  line-height: 45px;
  outline: none;
}
.login-input-pass > span {
  font-size: 14px;
  color: #666666;
  width: 100px;
  border-left: 1px #dcdcdc solid;
  padding-left: 15px;
  margin-left: 15px;
}
.login-input-pass > span > a {
  color: #666666;
}
.login-input-bt {
  margin-top: 15px;
  text-align: center;
  width: 100%;
  height: 45px;
  line-height: 45px;
  color: #ffffff;
  background: #37b3ff;
  border-radius: 15px;
  font-size: 14px;
}
.login-input-bt > a {
  color: #ffffff;
  display: block;
}
.login-input-ft {
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.login-input-message > a {
  color: #666666;
}
.login-input-forget > a {
  color: #666666;
}
/*登录方式*/
.login-mode {
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-mode-center {
  width: 50%;
  padding: 0.95rem 0;
}
.login-mode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #bbbbbb;
  font-size: 14px;
}
.login-mode-hr {
  width: 2rem;
}
.login-mode-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.95rem 0.25rem;
}
.login-mode-item {
  width: 60px;
  text-align: center;
  color: #666666;
  font-size: 0.65rem;
}
.login-mode-item-text {
  padding: 15px 0;
}
</style>
